<template>
  <div id="app">
    <div id="container">
   
      <div class="preview" ref="preview"></div>
	  <img :src="src1" alt="">
    </div>
  </div>
</template>
 
<script>
 
export default {
  data () {
    return {
      text: '1231546',
      src1: 'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500'
    };
  },
  mounted () {
    // console.log( this.getIpAdress() )
    this.getBase64FromImageURL(this.src1, async (base64URL) => {
      console.log(base64URL);
      const imgURL = this.getFileFromBase64(base64URL, 'imgName');
      console.log(imgURL);
      let img = await this.blobToImg(imgURL)
      let canvas = this.imgToCanvas(img)
	//   传入水印需要的文字
      let blob = await this.watermark(canvas, this.text)
      let newImage = await this.blobToImg(blob)
      //console.log(newImage)
	    this.src1=newImage.src
    })
  },
  methods: {
        getIpAdress () {
              var cip = returnCitySN["cip"];
              return cip
            // const interfaces = require('os').networkInterfaces()
            // console.log('111111')
            //   console.log(interfaces)
            // console.log('111111')
            // for (const devName in interfaces) {
            //   const iface = interfaces[devName]
            //   for (let i = 0; i < iface.length; i++) {
            //     const alias = iface[i]
            //     if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
            //       return alias.address
            //     }
            //   }
            // }
     },

    blobToImg (blob) {
      return new Promise((resolve) => {
        let reader = new FileReader()
        reader.addEventListener('load', () => {
          let img = new Image()
          img.src = reader.result
          img.addEventListener('load', () => resolve(img))
        })
        reader.readAsDataURL(blob)
      })
    },
    imgToCanvas (img) {
      console.log(img);
      let canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      let ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
 
      return canvas
    },
    watermark (canvas, text) {
      return new Promise((resolve) => {
        let ctx = canvas.getContext('2d')
        // 设置字号和字体
        ctx.font = "24px 宋体"
        // 设置
        ctx.fillStyle = "#FFC82C"
        // 设置右对齐
        ctx.textAlign = 'right'
        // 在指定位置绘制文字
        ctx.fillText(text, canvas.width - 20, canvas.height - 20)
        // ctx.fillText(text, canvas.width - , canvas.height - )
        ctx.fillText(text, canvas.width - 200, canvas.height - 200)
 
        canvas.toBlob(blob => resolve(blob))
      })
    },
    /* 将图片（路径）转换为Base64 */
    getBase64FromImageURL (url, callback) {
      var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var base64URL = canvas.toDataURL('image/png');
        callback(base64URL);
        canvas = null;
      };
      img.src = url;
    },
    /* 将base64转换为file类型 */
    getFileFromBase64 (base64URL, filename) {
      var arr = base64URL.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    }
  },
 
}
 
</script>